<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>用户登录日志</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
    <style>
        /* 适用于Chrome、Safari、Edge等WebKit内核浏览器 */
        ::-webkit-scrollbar {
            display: none;
        }

        /* 适用于Firefox */
        html {
            scrollbar-width: none;
        }
    </style>
</head>
<body>

<!--数据表格-->
<div class="layui-margin-3 layui-anim layui-anim-upbit">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<!--解析特殊值的含义-->
<script type="text/html" id="table-type">
    {{# if(d.type === 0) { }}
    <span class="layui-badge layui-bg-blue">用户在线</span>
    {{# } else if(d.type == 1) { }}
    <span class="layui-badge layui-bg-green">主动登出</span>
    {{# } else if(d.type == 2) { }}
    <span class="layui-badge">会话过期</span>
    {{# } else { }}
    <span class="layui-badge layui-bg-cyan">未知类型</span>
    {{# } }}
</script>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['table'], function () {
        let table = layui.table;

        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/getLogData',
            page: true,
            limit: 30,
            limits: [30, 50, 100],
            cols: [
                [
                    {field: 'id', title: '日志编号', align: 'center'},
                    {field: 'who', title: '用户编号', align: 'center', templet: '<div><span class="layui-badge  layui-bg-cyan">{{= d.who }}</span></div>'},
                    {field: 'name', title: '用户昵称', align: 'center'},
                    {field: 'ip', title: 'IP地址', align: 'center'},
                    {
                        field: 'login', title: '登入时间', align: 'center', templet: function (d) {
                            return d.login.replace('T', ' ');
                        }
                    },
                    {
                        field: 'logout', title: '登出时间', align: 'center', templet: function (d) {
                            return d.logout.replace('T', ' ');
                        }
                    },
                    {field: 'type', title: '状态信息', templet: '#table-type', align: 'center'}
                ]
            ],
            error: function (res, msg) {
                console.log(res, msg)
            }
        });
    });
</script>
</body>
</html>